<template>
  <div class="demo-select-size">
    <div class="column-divider">
      <div class="demo-button-line">
        <div class="d-title" style="margin-right:20px">showFooter</div>
        <e-select
          showFooter
          type="checkbox"
          multiple
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title" style="margin-right:100px">自定义footer</div>
        <e-select
          showFooter
          type="checkbox"
          multiple
          ref="refSelect"
          style="width:400px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled">{{ item.label }}</e-option>
          <template #footer>
            <div class="show-footer">
              <e-button type="text" size='small' @click="cancel">取消</e-button>
              <e-button type="primary"  size='small' @click="ok">确定</e-button>
            </div>
          </template>
        </e-select>

      </div>
    </div>
  </div>
</template>
<script setup>


import {ref} from "vue"
let cityList=ref([
  {
    value: 'New York',
    label: 'New York'
  },
  {
    value: 'London',
    label: 'London'
  },
  {
    value: 'Sydney',
    label: 'Sydney'
  },
  {
    value: 'Ottawa',
    label: 'Ottawa'
  },
  {
    value: 'Paris',
    label: 'Paris'
  },
  {
    value: 'Canberra',
    label: 'Canberra'
  },
  {
    value: 'New York-1',
    label: 'New York-1'
  },
  {
    value: 'London-1',
    label: 'London-1'
  },
  {
    value: 'Sydney-1',
    label: 'Sydney-1'
  },
  {
    value: 'Ottaw-1',
    label: 'Ottaw-1'
  },
  {
    value: 'Paris-1',
    label: 'Paris-1'
  },
  {
    value: 'Canberra-1',
    label: 'Canberra-1'
  }
])

let lazy=ref(false)
let refSelect=ref();
const onOpenChange=(value)=>{
  console.log('onOpenChange',value)
  lazy.value=value
  setTimeout(()=>{
    lazy.value=false
  },3000)
}

const onQueryChange=()=>{
  lazy.value=true
  setTimeout(()=>{
    lazy.value=false
  },2000)
}

const cancel=()=>{
  console.log("///////////////",refSelect.value)
  refSelect.value.cancel()
}

const ok=()=>{
  refSelect.value.ok()
}
</script>
<style scoped>
.demo-select-size .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  display: inline-block;
  width: 4rem;
  margin-bottom: 20px;
}

.show-footer{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
